<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-3 flex v-align-c">
      <span></span>
      <i>标签导航</i>
    </h2>
    <div class="goods-form">
      <h3 class="pancel-s-title">导航设置({{details.topNavList.length}}/20)</h3>
      <el-form class="pad-t-15 pad-l-25 pad-r-25 form-diy">
        <div class="border-box">
          <template v-if="details.topNavList">
          <div v-for="(item, index) in details.firstList" :key="index">
            <div class="drag-box">
              <div class="border-box topnav-form flex v-align-c">
                <img class="width-12 height-10 mar-r-15 mar-l--5" :src="iconDrag" alt="">
                <div class="pad-t-5 pad-b-5 flex-item border-l">
                  <el-form-item label-width="5px" class="none-mar-b">
                    <el-input placeholder="最多4个字" class="mini-s-input" maxlength="4" v-model="item.navName"></el-input>
                  </el-form-item>
                  <el-form-item label-width="5px" class="none-mar-b mar-t-4">
                    <div class="mini-sbar-input cursor-n" >{{ item.linkRemark }}</div>
                  </el-form-item>
                </div>
              </div>
            </div>
          </div>
          <draggable id="content-box" v-model="details.secondList" dragable="true" :move="getdata" @update="datadragEnd">
            <div v-for="(item, index) in details.secondList" :key="'topnav-list-' + index">
              <div class="drag-box">
                <div class="border-box topnav-form flex v-align-c">
                  <img class="width-12 height-10 mar-r-15 mar-l--5" :src="iconDrag" alt="">
                  <div class="pad-t-5 pad-b-5 flex-item border-l">
                    <el-form-item label-width="5px" class="none-mar-b">
                      <el-input placeholder="最多4个字" class="mini-s-input" maxlength="4" v-model="item.navName"></el-input>
                    </el-form-item>
                    <el-form-item label-width="5px" class="none-mar-b mar-t-4">
                      <div class="mini-sbar-input cursor-p" :class="item.linkRemark ? '' : 'default-sbar-input'"
                        @click="linkLayer(item)">{{ item.linkRemark ? item.linkRemark : '请选择链接' }}</div>
                    </el-form-item>
                  </div>
                </div>
                <div class="btn-edit-del selected">
                  <div class="btn-del" @click="remove(item, index)">删除</div>
                </div>
              </div>
            </div>
          </draggable>
          <div class="add-border-box mar-b-15" v-if="details.topNavList.length < 20" @click="addBorderBox">
            <span>+</span>
            <span>添加</span>
            <span>{{details.topNavList.length}}/20</span>
          </div>
        </template>
        </div>
        <div class="mar-l--25 mar-t--28 pad-b-15">
          <h3 class="pancel-s-title">导航样式</h3>
        </div>
        <div class="border-box near-box">
          <h4>默认背景</h4>
          <div class="mar-t--5 mar-b--10">
            <el-form-item>
              <div class="font-14 v-align-c">
                <el-color-picker 
                  v-model="details.propMap.backgroundColor" 
                  @active-change="activecolorChange(details, 'backgroundColor', '#FFFFFF', $event)" 
                  @change="colorChange(details, 'backgroundColor', '#FFFFFF', $event)" 
                  :predefine="predefineColors" 
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.backgroundColor" @change="iptColorChange(details, 'backgroundColor', '#FFFFFF', $event)">
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'backgroundColor', '#FFFFFF')">重置</el-button>
              </div>
            </el-form-item>
          </div>
          <h4>选中背景</h4>
          <div class="mar-t--5 mar-b--10">
            <el-form-item>
              <div class="font-14 v-align-c">
                <el-color-picker 
                  v-model="details.propMap.selectBackgroundColor" 
                  @active-change="activecolorChange(details, 'selectBackgroundColor', '#FFFFFF', $event)" 
                  @change="colorChange(details, 'selectBackgroundColor', '#FFFFFF', $event)" 
                  :predefine="predefineColors" 
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.selectBackgroundColor" @change="iptColorChange(details, 'selectBackgroundColor', '#FFFFFF', $event)">
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'selectBackgroundColor', '#FFFFFF')">重置</el-button>
              </div>
            </el-form-item>
          </div>
          <h4>默认文字</h4>
          <div class="mar-t--5 mar-b--10">
            <el-form-item>
              <div class="font-14 v-align-c">
                <el-color-picker 
                  v-model="details.propMap.fontColor" 
                  @active-change="activecolorChange(details, 'fontColor', '#FFFFFF', $event)" 
                  @change="colorChange(details, 'fontColor', '#FFFFFF', $event)" 
                  :predefine="predefineColors" 
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.fontColor" @change="iptColorChange(details, 'fontColor', '#FFFFFF', $event)">
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'fontColor', '#FFFFFF')">重置</el-button>
              </div>
            </el-form-item>
          </div>
          <h4>选中文字</h4>
          <div class="mar-t--5 mar-b--10">
            <el-form-item>
              <div class="font-14 v-align-c">
                <el-color-picker 
                  v-model="details.propMap.selectFontColor" 
                  @active-change="activecolorChange(details, 'selectFontColor', '#FFFFFF', $event)" 
                  @change="colorChange(details, 'selectFontColor', '#FFFFFF', $event)" 
                  :predefine="predefineColors" 
                  class="color-sel" />
                <el-input class="mar-l-20 color-sel-input" placeholder="请输入内容" v-model="details.propMap.selectFontColor" @change="iptColorChange(details, 'selectFontColor', '#FFFFFF', $event)">
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(details, 'selectFontColor', '#FFFFFF')">重置</el-button>
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <!-- 链接设置弹层 -->
    <el-dialog title="链接选择器" :visible.sync="linkSetVisible" :close-on-press-escape="true" width="850px">
      <component-link-layer pageType="120" :appType="appType" v-on:selectLink="setLinkTemp"></component-link-layer>
      <div slot="footer" class="dialog-footer" v-if="false">
        <el-button @click="linkSetVisible = false">关闭</el-button>
        <el-button type="primary" @click="setLink">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import elDragDialog from '@/directive/el-dragDialog'
  import draggable from 'vuedraggable'
  import { getToken } from '@/utils/auth'
  import ComponentLinkLayer from './../ComponentLinkLayer'
  import iconDrag from '@/assets/images/icon-drag.gif'
  export default {
    components: {
      ComponentLinkLayer,
      draggable
    },
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      details1: {
        type: Object,
        default: null
      },
      appType: {
        type: Number,
        default: 10
      }
    },
    data() {
      return {
        iconDrag,
        details: {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          propMap: {},
          topNavList: [],
          firstList: [],
          secondList: []
        },
        predefineColors: [],
        fullScreenLoading: null,
        // 定义链接选择器基础数据开始
        linkSetVisible: false,
        link: {},
        linkTemp: {}
        // 定义链接选择器基础数据结束
      }
    },
    // 初始化页面
    created() {
      this.details = this.details1
      this.token = { accessToken: getToken() }
      const that = this
      this.$bus.$on('resetDetailsTopnav', function(details) {
        that.details = details
      })
      // 拆分标签导航数组
      this.$set(this.details, 'firstList', [])
      this.$set(this.details, 'secondList', [])
      this.details.firstList = this.details.topNavList.filter((item, index) => index === 0)
      this.details.secondList = this.details.topNavList.filter((item, index) => index !== 0)
      // 获取初始化的颜色值 全局设置
      this.predefineColors = this.$store.state.globalData.predefineColors
    },
    methods: {
      getdata(evt) {
        // 这里evt.draggedContext后续的内容根据具体的定义变量而定
      },
      datadragEnd(evt) {
        evt.preventDefault()
        const filters = this.details.secondList
        for (let a = 0; a < filters.length; a++) {
          filters[a].index = a
        }
        this.details.secondList = filters
        this.updateAry(this.details, 'secondList')
        this.concatAry()
      },
      concatAry() {
        // 合并被拆分的标签导航
        this.details.topNavList = [...this.details.firstList, ...this.details.secondList]
      },
      updateAry(obj, aryStr) {
        // 更新数组，触发视图更新
        const updateData = obj[aryStr]
        this.$delete(obj, aryStr)
        this.$set(obj, aryStr, updateData)
      },
      addBorderBox() {
        if (this.details.secondList.length < 19) {
          this.details.secondList.push({
            topnavId: '',
            navName: '',
            backgroundColor: '',
            selectBackgroundColor: '',
            fontColor: '',
            selectFontColor: '',
            linkType: '',
            linkParams: ''
          })
          this.updateAry(this.details, 'secondList')
          this.concatAry()
        }
      },
      linkLayer(item) {
        this.link = item
        this.linkSetVisible = true
      },
      setLinkTemp(item) {
        Object.assign(this.linkTemp, item)
        this.setLink()
      },
      setLink() {
        Object.assign(this.link, this.linkTemp)
        this.linkSetVisible = false
      },
      resetDetails() {
        this.details = {
          propMap: {},
          topNavList: []
        }
      },
      remove(item, index) {
        // 判断被删除的是新建的导航项还是数据库存在的
        if (item.topnavId) {
          const selectIndex = this.details.secondList.findIndex(nav => nav.topnavId === item.topnavId)
          this.details.secondList.splice(selectIndex, 1)
        } else {
          this.details.secondList.splice(index, 1)
        }
        this.updateAry(this.details, 'secondList')
        this.concatAry()
      },
      colorChange(obj, key, defaultColor, e) {
        // 颜色值变化
        if (!e) {
          obj.propMap[key] = defaultColor
        }
      },
      activecolorChange(obj, key, defaultColor, e) {
        // 调色板中值变化
        if (!e) {
          obj.propMap[key] = defaultColor
        }
      },
      iptColorChange(obj, key, defaultColor, e) {
        // 颜色输入框触发事件
        if (this.$utils.isHexColor(e)) {
          obj.propMap[key] = e
        } else {
          obj.propMap[key] = defaultColor
        }
      },
      resetColor(obj, key, defaultColor) {
        // 重置颜色按钮触发事件
        obj.propMap[key] = defaultColor
      },
      marginChange(obj, key, e) {
        // 滑块输入框触发事件
        if (this.$utils.isNumber(e)) {
          if (e * 1 > 50) {
            obj.propMap[key] = 50
          } else {
            obj.propMap[key] = e * 1
          }
        } else {
          obj.propMap[key] = 0
        }
      }
    }
  }
</script>
<style lang="less" scoped>
.add-border-box{
  border: .5px dashed #E0E5EA;
}
.cursor-n{
  cursor: not-allowed;
}
.drag-box{
  position: relative;
  .border-box{
    margin-bottom: 15px;
  }
  .topnav-form{
    padding: 0 20px;
  }
  /deep/.el-form-item__label{
    line-height: 30px;
  }
  .border-l{
    border-left: .5px solid #EEF4F9;
  }
  .btn-edit-del {
    width: 30px;
    height: 30px;
    overflow: hidden;
    position: absolute;
    right: 0px;
    top: 0px;
    display: block;
    z-index: 90;
    font-size: 14px;
    text-align: right;
    display: none;
    &.selected{
      display: block;
    }
  }
  .btn-edit-del > div {
    width: 16px;
    height: 16px;
    display: inline-block;
    text-indent: -100em;
    text-align: left;
    font-size: 10px;
    color: #333;
    cursor: pointer;
    position: relative;
    z-index: 11;
    background: url('@/../../../../../../assets/images/icons-close-1.png') no-repeat;
    background-size: 16px 16px;
  }
}
</style>
